<template>
  <Head />
  <div class="main">
    <img src="@/assets/images/invite-bg.png" alt="" />
    <p>{{ $t("inviteTips") }}</p>
    <div class="content">
      <van-button class="copy-link" type="default" @click="copyLink">{{
        $t("copyLink")
      }}</van-button>
      <div class="link">
        <div class="line"></div>
        <div
          :class="['item', localStorage.get('lang')]"
          @click="goUrl(0)"
        >
          <span class="title">{{ $t("directEffectiveInvitation") }}</span>
          <span class="value">{{ validNum }} {{ $t("user") }}</span>
        </div>
        <div class="item" @click="goUrl(1)">
          <span class="title">{{ $t("effectiveTeamIinvitation") }}</span>
          <span class="value">{{ teamValidNum }} {{ $t("user") }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Async_recommendNum } from "@/server/user";
import { localStorage } from "@/utils/local-storage";
import { useI18n } from "vue-i18n";
import { showToast } from "vant";
import { userStore } from "@/stores/modules/user";
const router = useRouter();
import clipboard3 from "vue-clipboard3";

const { t } = useI18n();
const { toClipboard } = clipboard3();
const addressStore = userStore();
let teamValidNum = ref(0);
let validNum = ref(0);
const copyLink = async () => {
  await toClipboard(
    `${window.location.host}/home?address=${addressStore.address}`
  );
  showToast(t("copyLinkSuccess"));
};

const getList = async () => {
  try {
    let res: any = await Async_recommendNum(addressStore.address);
    if (res) {
      teamValidNum.value = res.teamValidNum;
      validNum.value = res.validNum;
    }
  } catch (error) {
    console.error(error);
  }
};

const goUrl = type => {
  router.push({
    path: "/inviteList",
    query: {
      type
    }
  });
};
onMounted(() => {
  getList();
});
</script>
<style scoped lang="scss">
.main {
  width: 100vw;
  img {
    margin-top: -45px;
    border-radius: 20px;
    animation: shake 4s infinite;
  }

  p {
    padding: 0 40px;
    color: #f0b90b;
    text-align: center;
    margin-top: -120px;
    margin-bottom: 30px;
  }

  .content {
    .copy-link {
      width: 70%;
      border-radius: 1000px;
      display: flex;
      justify-content: center;
      margin: 0 auto;
      font-size: 16px;
      padding: 20px 50px;
      font-weight: bold;
      color: hsla(0, 0%, 100%, 0.8);
      margin-bottom: 40px;
      background-color: #f0b90b;
      box-shadow: 0 1.066667vw 1.066667vw #01121e;
      background: #b2dcfe;
      background: linear-gradient(to right, #b2dcfe, #abc5f7, #b2dcfe);
      color: #000;
    }

    .link {
      display: flex;
      justify-content: space-around;
      position: relative;

      .line {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        width: 1px;
        height: 20px;
        background: hsla(0, 0%, 100%, 0.3);
      }

      .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
        align-items: center;

        .title {
          font-size: 16px;
          line-height: 16px;
          margin-bottom: 10px;
          color: hsla(0, 0%, 100%, 0.6);
          position: relative;

          &::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 2px;
            width: 10px;
            height: 10px;
            background: url("@/assets/images/right.png");
            background-size: 100% 100%;
          }
        }

        .value {
          font-weight: bold;
          font-family: DINPro-Black;
        }
      }
    }
  }
}

@keyframes shake {
  0% {
    transform: scale(0.8) translate(0px, 0px);
  }

  25% {
    transform: scale(0.8) translate(6px, 6px);
  }

  50% {
    transform: scale(0.8) translate(0px, 0px);
  }

  75% {
    transform: scale(0.8) translate(-6px, -6px);
  }

  100% {
    transform: scale(0.8) translate(0px, 0px);
  }
}
</style>
